* {
  margin: 0;
  padding: 0;}

a {
  color: #222;
  text-decoration: none; }

body {
  background: #f5f5f5; }

header {
  width: 100%;
  height: auto;
  background: #33CCCC;
  text-align: center;
  background-image: url("../images/headerBk.png");
  padding-top: 30px; }
  @media screen and (orientation: landscape) {
    header {
      padding-top: 50px; } }
  header div {
    width: 40%;
    padding-top: 5px;
    height: 35px;
    margin: 0 auto;
    border: 1px #fff solid; }
    @media screen and (orientation: landscape) {
      header div {
        width: 20%;
        height: 55px; } }
    header div span {
      font-size: 25px;
      color: #fff; }
      @media screen and (orientation: landscape) {
        header div span {
          font-size: 36px; } }
  header nav {
    width: 100%;
    height: 38px;
    border-bottom: 1px #000 solid;
    margin-top: 50px;
    padding-bottom: 5px; }
    @media screen and (orientation: landscape) {
      header nav {
        margin-top: 100px; } }
    header nav a {
      text-decoration: none;
      font-size: 18px;
      color: #fff;
      padding: 12px; }
      header nav a:hover {
        border-top: 1px #fff solid; }

@media screen and (orientation: landscape) {
  article {
    margin-top: 30px;
    margin-bottom: 100px;
    padding-left: 10%;
    padding-right: 10%; } }

section {
  background: #fff;
  padding: 20px;
  padding-bottom: 50px; }

#cr {
  position: absolute;
  color: #f5f5f5;
  font-size: 10px; }